<template>
	<view class="page">
		<u-navbar leftIconSize='30rpx' title="订单" @leftClick="$utils.back()" :placeholder="true" bgColor="#f5f5f5">
		</u-navbar>
		<view style="background-color: #f5f5f5;">
			<view class="tab">
				<u-tabs :inactiveStyle='{fontSize:"26rpx"}' :activeStyle='{fontSize:"26rpx"}' :current="id"
					:list="list1" @click="click"></u-tabs>
			</view>
		</view>
		<view style="flex: 1;">
			<z-paging ref="paging" :fixed="false" v-model="data" @query="query" :default-page-no="1"
				:default-page-size="10" style="height: 100%;box-sizing: border-box;padding-top: 10rpx;" scroll-y="true">
				<view v-for="item in data" :key="item.id" class="contentBox viewWidth" @click="jump(item.id)">
					<view class="flex">
						<view style="flex: 1;">
							<u-text :text='`订单编号：${item.order_id}`' />
						</view>
						<view class="color_ED7353">
							{{item.status_text}}
						</view>
					</view>
					<view class="flex mt20" style="align-items: flex-start;" v-if="item.goods.length">
						<image class="mr10" :src="item.goods[0].goods_thumb" mode="aspectFill" />
						<view style="flex: 1;">
							{{item.goods[0].goods_name}}
						</view>
						<view>
							<u-text :text='item.goods[0].goods_charge' mode="price" />
						</view>
					</view>
					<view class="flex mt20" style="justify-content: flex-end;" v-if="item.goods.length">
						共1件商品,合计<view>
							<u-text size='24rpx' :text='item.goods[0].goods_charge' mode="price" />
						</view>
					</view>
					<view class="flex mt20">
						<view style="flex: 1;color: #bbb;">
							{{item.created_at | changeTime}}
						</view>
						<view style="display: flex;align-items: center;">
							<u-avatar :src='item.user.avatar' size='40rpx'/>
							<view style="width: 10rpx;" />
							<u-text lines='1' size='24rpx' :text='item.user.nick_name'/>
						</view>
					</view>
				</view>
			</z-paging>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				disabled: false,
				openid: uni.getStorageSync('openid'),
				data: [],
				loading: true,
				list1: [{
					name: '全部',
				}, {
					name: '未支付',
				}, {
					name: '未发货',
				}, {
					name: '已发货'
				}, {
					name: '确认收货'
				}, {
					name: '已取消'
				}],
				trendsHeight: 0,
				id: 0
			}
		},
		onLoad(op) {
			this.id = ~~op.id
		},
		methods: {
			jump(id) {
				this.$utils.navigateTo({
					url: '/order/detail?id=' + id
				})
			},
			click(item) {
				this.id = item.index
				this.$refs.paging.reload()
				this.loading = true
			},
			query(pageNo, pageSize) {
				let sendData = {
					page: pageNo,
					size: pageSize,
				}

				switch (this.id) {
					case 4:
						sendData.status = 9;
						break;
					case 3:
						sendData.status = 6;
						break;
					case 2:
						sendData.status = 5;
						break;
					case 1:
						sendData.status = 1;
						break;
					case 5:
						sendData.status = 11;
						break;
				}

				uni.showLoading({
					title: '加载中...'
				})
				this.$api.Shop.Order(sendData).then(res => {
					uni.hideLoading();
					this.$refs.paging.complete(res.data.orders.data.map(item=>{
						return{
							...item,
							user:res.data.users[item.user_id]
						}
					}));
					this.loading = false

				}).catch(err => uni.hideLoading())
			},
		}
	}
</script>

<style scoped lang="scss">
	.tab {
		padding: 0rpx 40rpx 10rpx;
	}

	.page {
		background-color: #f5f5f5;
		display: flex;
		flex-direction: column;
		height: 100vh;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		box-sizing: border-box;
	}

	.contentBox {
		border-radius: 8rpx;
		background-color: #fff;
		padding: 20rpx;
		margin-top: 20rpx;
		box-sizing: border-box;

		.flex {
			display: flex;
			align-items: center;
		}
	}

	.but {
		border-radius: 8rpx;
		padding: 10rpx 20rpx;
	}

	.color_ED7353 {
		color: #ED7353;
	}

	.baColor_ED7353 {
		color: #fff;
		background-color: #ED7353;
	}

	.baColor_ddd {
		color: #ED7353;
		background-color: #eee;
	}


	image {
		width: 150rpx;
		height: 150rpx;
		border-radius: 8rpx;
	}
</style>